<template>
  <view class="my">
    <loginx v-if="!cookie"></loginx>
    <template v-else>
      <view class="user_container">
        <scroll-view scroll-y="true" @refresherrefresh="pullDownRefresh" @refresherpulling="refresherpulling" class="scroll" refresher-enabled :refresher-triggered="flag">
          <!-- 头部区域 -->
          <view class="head_container">
            <view class="pic"><image :src="userInfo.nickname ? userInfo.avatarUrl : orUserinfo.avatarUrl" mode="widthFix"></image></view>
            <view class="info">
              <view>
                {{ userInfo.nickname ? userInfo.nickname : orUserinfo.nickname }}
                <text class="iconfont icon-keaide" style="margin: 0 20rpx; font-size:60rpx"></text>
              </view>
              <view style="margin: 16rpx 0; color:#8d98a8; transform:translateX(-20rpx);font-size: 34rpx;">
                <!-- <text style="margin: 0 20rpx; ">{{ userInfo.nickname ? userInfo.follows : orUserinfo.follows }}关注</text>
              <text style="margin: 0 20rpx;">{{ userInfo.nickname ? userInfo.followeds : orUserinfo.followeds }}粉丝</text> -->
                <text style="margin: 0 20rpx; ">{{ follow.length > 0 ? follow.length : userInfo.follows || orUserinfo.follows }}关注</text>
                <text style="margin: 0 20rpx;">{{ followed.length > 0 ? followed.length : userInfo.followeds || orUserinfo.followeds }}粉丝</text>
                <text style="margin: 0 20rpx;">Lv{{ userInfo.nickname ? userInfo.level : orUserinfo.level }}</text>
              </view>
            </view>
          </view>
          <view class="center_container">
            <navigator class="navItem" :url="'../../subpkg/recently_songs/recently_songs'">
              <text class="iconfont icon-bofang-copy1"></text>
              <text class="wyf">最近播放</text>
            </navigator>
            <navigator class="navItem" :url="'../../subpkg/love_songs/love_songs'">
              <text class="iconfont icon-keaide"></text>
              <text class="wyf">喜欢</text>
            </navigator>
            <navigator class="navItem" :url="'../../subpkg/heart_model/heart_model'">
              <text class="iconfont icon-B-copy"></text>
              <text class="wyf">心动模式</text>
            </navigator>
            <navigator class="navItem" :url="'../../subpkg/collect_songsList/collect_songsList'">
              <text class="iconfont icon-shoucang"></text>
              <text class="wyf">收藏歌单</text>
            </navigator>
          </view>
          <view class="title">为你推荐</view>
          <!-- 底部区域 -->
          <view class="footer_container">
            <view class="recommend_container" v-for="item in dayRecommend" :key="item.id" @click="navSongsListDetail(item.id)">
              <view class="zzz">
                <image :src="item.picUrl" mode="widthFix"></image>
                <text class="hhh iconfont icon-dkw_bofang">{{ (item.playcount / 10000).toFixed(1) + '万' }}</text>
                <text>{{ item.name }}</text>
              </view>

              <!-- <text class="hhh iconfont icon-dkw_bofang">{{item.playcount>100000000?(item.playcount / 100000000).toFixed(2) + '亿':(item.playcount / 10000).toFixed(1) + '万'}}</text> -->
            </view>
          </view>
        </scroll-view>
      </view>
    </template>
    <!-- <my-userinfo v-else></my-userinfo> -->
  </view>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
export default {
  onLoad() {
    this.getDayRecommend()
  },
  data() {
    return {
      follow: [],
      followed: [],
      dayRecommend: [],
      flag: false
    }
  },
  // onLoad() {
  //   // console.log(!this.cookie);
  //   console.log(111);
  // },
  computed: {
    // 以下两种方式都可以
    // ...mapState({ token: state => state.login.token })
    ...mapState('login', ['token', 'cookie', 'userInfo', 'orUserinfo'])
  },

  methods: {
    ...mapMutations('login', ['updateORuserInfo', 'updateUserInfo']),
    pullDownRefresh() {
      this.flag = false
      if (this.cookie) {
        if (this.userInfo.nickname) {
          this.getUserFollow(this.userInfo.userId)
          this.getUserFollowed(this.userInfo.userId)
        } else {
          this.getUserFollow(this.orUserinfo.userId)
          this.getUserFollowed(this.orUserinfo.userId)
        }
      }
    },
    refresherpulling() {
      this.flag = true
    },
    async getUserFollow(id) {
      const { data: res } = await uni.$http.get('user/follows', { uid: id, timestamp: new Date().getTime() })
      if (res.code !== 200) return uni.$showMsg('关注列表获取失败')
      this.follow = res.follow
      // console.log(res)
    },
    async getUserFollowed(id) {
      const { data: res } = await uni.$http.get('user/followeds', { uid: id, timestamp: new Date().getTime() })
      if (res.code !== 200) return uni.$showMsg('关注列表获取失败')
      this.followed = res.followeds
      // console.log(res)
    },
    async getDayRecommend() {
      const { data: res } = await uni.$http.get('recommend/resource')
      // console.log(res)
      if (res.code !== 200) return uni.$showMsg('推荐歌单获取失败')
      this.dayRecommend = res.recommend
    },
    navSongsListDetail(id) {
      uni.navigateTo({
        url: '/subpkg/songs_list_detail/songs_list_detail?id=' + id
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.my {
  height: 100%;
  background-image: url('https://img.abeim.cn/imgs/2022/09/caa7add1c3f31811.jpg');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  // display: flex;
  // justify-content: center;
  // align-items: center;
  // flex-direction: column;
}
.user_container {
  background: linear-gradient(45deg, pink, skyblue);
  background-color: #edece8;
  height: 100%;
  background-size: 100% 100%;
}
.center_container {
  height: 150rpx;
  width: 90%;
  background-color: #ffffff;
  border-radius: 20rpx;
  margin: 0 auto;
  display: flex;
}
.center_container .iconfont {
  width: 100rpx;
  height: 100rpx;
  font-size: 60rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}
.navItem {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 2;
  align-items: center;
}
.center_container .wyf {
  font-size: 20rpx;
  // text-align: center;
}
.scroll {
  height: 100vh;
}
.pic {
  height: 300rpx;
  width: 90%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(114rpx);
  background-color: #ffffff;
  border-radius: 20rpx;
}
.pic image {
  width: 200rpx;
  height: 200rpx;
  border-radius: 50%;
  box-shadow: 0 2rpx 20rpx pink;
  transform: translateY(-130rpx);
}
.info {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  transform: translate(0rpx, -70rpx);
}
.title {
  font-size: 35rpx;
  font-weight: 550;
  margin: 30rpx 50rpx 10rpx 50rpx;
}
.footer_container {
  display: flex;
  flex-wrap: wrap;
}
.recommend_container {
  position: relative;
  display: flex;
  margin: 20rpx;
  flex: 2;
}
.zzz {
  display: flex;
  flex-direction: column;
  margin-left: 30rpx;
}
.recommend_container .hhh {
  position: absolute;
  background: rgba(36, 36, 36, 0.3);
  // right: 2%;
  top: 2%;
  color: white;
  border-radius: 20rpx;
  font-size: 25rpx;
  padding: 8rpx;
}
.zzz text {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.recommend_container image {
  border-radius: 20rpx;
  height: 150rpx;
  width: 150rpx;
  // display: flex;
  // flex-direction: row;
  // flex: 1;
  // flex-wrap: wrap;
}
</style>
